import { ProCard } from "@ant-design/pro-components";
import { Button, Steps } from "antd";

import React, { useState } from "react";

const Page14: React.FC = () => {
  const [current, setCurrent] = useState(0);

  const steps = [
    {
      title: "第一步",
      description: "填写基本信息",
    },
    {
      title: "第二步",
      description: "上传文件",
    },
    {
      title: "第三步",
      description: "确认提交",
    },
  ];

  const next = () => {
    setCurrent(current + 1);
  };

  const prev = () => {
    setCurrent(current - 1);
  };

  return (
    <div style={{ padding: 24 }}>
      <h1>步骤页面</h1>
      <ProCard>
        <Steps current={current} items={steps} />
        <div style={{ marginTop: 24 }}>
          {current < steps.length - 1 && (
            <Button type="primary" onClick={() => next()}>
              下一步
            </Button>
          )}
          {current === steps.length - 1 && (
            <Button type="primary" onClick={() => console.log("完成")}>
              完成
            </Button>
          )}
          {current > 0 && (
            <Button style={{ margin: "0 8px" }} onClick={() => prev()}>
              上一步
            </Button>
          )}
        </div>
      </ProCard>
    </div>
  );
};

export default Page14;
